<template>
  <div id="bbnb" style="font-size:14px;background-color: #FFF;" v-wechat-title="this.title">

    <div class="top"></div>
    <div class="centered">
      <span class="dqhz">当前患者</span>
      <br>
      <br>
      <br>
      <div>
        <img class="mainimg" src="../../static/wximg/login/mantx.png">

      </div>
      <div class="xian"></div>

      <p class="update">更改患者</p>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div style="width: 100%;">
      <div class="tjhzimg" @click="add">
     <span class="tjxhz">添加新患者
         <br>
            <span style="color:#cccccc;font-size:12px">Add patient
                <br>
                information
            </span>

     </span>


        <img src="../../static/wximg/login/tjhz.png" class="tjhz">

      </div>
      <div class="sysimg">
        <img src="../../static/wximg/login/sys.png" class="sys">
        <span class="syss">扫一扫
          <br>
            <span style="color:#cccccc;font-size:12px">Scan QR code

            </span>
    </span>
      </div>

    </div>

    <div style="width: 100%;margin-top: 80px;text-align: center">
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/slb.png">
        <br>
        <br>
        <span>视力表</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/xwj.png">
        <br>
        <br>
        <span>显微镜</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/gy.png">
        <br>
        <br>
        <span>干眼</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/yb.png">
        <br>
        <br>
        <span>眼表</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/sllr.png">
        <br>
        <br>
        <span>眼表</span>
      </div>
    </div>

    <div style="width: 100%;margin-top: 160px;text-align: center">
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/2win.png">
        <br>
        <br>
        <span>2WIN</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/visionfit.png">
        <br>
        <br>
        <span>visionfit</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/lxd.png">
        <br>
        <br>
        <span>裂隙灯</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/tp.png">
        <br>
        <br>
        <span>图谱</span>
      </div>
      <div style="width: 20%;float: left;">
        <img style="width: 30px;height: 30px" src="../../static/wximg/login/yd.png">
        <br>
        <br>
        <span>眼底</span>
      </div>
    </div>
    <div style="width: 100%;height: 5px;background-color: #F8F8F8;margin-top: 240px"></div>
    <br>
    <br>
    <div style="width: 100%;height: 100px;text-align: center">
      <div style="width: 5px;height: 15px"></div>
      <img src="../../static/wximg/login/zxxx.png" style="width: 90%;height: 50px">
    </div>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, Icon, Group, Cell, Rater, Qrcode, InlineLoading} from 'vux'
  import {setTimeout} from 'timers';
  import myScroll from '../components/myScroll/myScroll.vue';
  // import Scroll from '../components/myScroll/myScroll.vue';
  export default {
    components: {
      Flexbox,
      FlexboxItem,
      Icon, Group, Cell, Rater, Qrcode, InlineLoading, myScroll
    },
    data() {
      return {
        title: "睿目",
        refreashType: false,
        lists: [],
        rater: 4,
        counter: 1, //当前页
        num: 10, // 一页显示多少条
        pageStart: 0, // 开始页数
        pageEnd: 0, // 结束页数
        listdata: [], // 下拉更新数据存放数组
        downdata: [], // 上拉更多的数据存放数组
        scrollData: {
          noFlag: false //暂无更多数据显示
        }
      }
    },
    mounted() {

      this.getNewsList();
    },
    updated() {
      let windowHeight = window.innerHeight;
      let divHeight = document.getElementById('view').offsetTop;
      document.getElementById('view').style.height = windowHeight - divHeight - 8 + 'px'
      console.log(windowHeight)
      console.log(divHeight)
    },
    methods: {

      add() {
        this.$router.push({name: 'add', params: {userId: 123}});
      },


      hideRef: function (value) {
        var _this = this;
        setTimeout(function () {
          _this.refreashType = false;
        }, value)
      },
      getList: function (params) {
        return this.$axios.post('https://www.easy-mock.com/mock/5bda66a4cd0e9e45c2074509/example/getList', params);
      },
      getListCallback: function (params) {
        this.getList(params).then(res => {
          this.showloading = false;
          this.hideRef(100)

          this.lists = res.data.data.list;
        });
      },
      //第一次加载的时候容易为空true
      getNewsList() {
        this.showloading = true
        this.getListCallback({pageSize: this.PageSize, pageNum: this.PageIndex});

      },
      onRefresh(done) {
        done(); // call done
      },
      onInfinite(done) {
        this.counter++;
        let end = this.pageEnd = this.num * this.counter;
        let i = this.pageStart = this.pageEnd - this.num;
        let more = this.$el.querySelector('.load-more')
        for (i; i < end; i++) {
          if (i >= 30) {
            more.style.display = 'none'; //隐藏加载条
            //走完数据调用方法
            this.scrollData.noFlag = true;
            break;
          } else {
            this.downdata.push({
              name: i + "==="
            })
            more.style.display = 'none'; //隐藏加载条
          }
        }
        done();
      },
      submit: function (item) {

        this.$router.push({name: 'showCli', params: {userId: 123}});
      },
      map: function () {
        this.$router.push({name: 'map', params: {userId: 123}});
      }
    },

  }
</script>


<style>
  @import '/static/css/css.css';

  .top {
    width: 100%;
    height: 25%;
    background-image: url("../../static/wximg/login/xxx.png");
    background-size: 100% 200px;
    padding-top: 35%;
  }

  .centered {
    width: 80%;
    height: 130px;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-top: -30%;
    margin: -17% auto;
    text-align: center;
    box-shadow: darkgrey 10px 10px 20px 1px;

  }

  .dqhz {
    float: left;
    margin-left: 20px;
    margin-top: 10px;
  }

  .mainimg {
    float: left;
    margin-left: 30px;
    width: 40px;
    height: 40px;

  }

  .box {
    width: 100%;
    margin-top: 110px;
  }

  .tjhzimg {
    width: 50%;
    float: left;

    text-align: center
  }

  .sysimg {
    width: 50%;
    float: left;
    text-align: center

  }

  .tjhz {
    width: 50px;
    height: 50px;
    float: right;

  }

  .sys {
    width: 50px;
    height: 50px;
    float: left;
    padding-left: 15%;

  }

  .xian {
    height: 1px;
    background-color: #EEEEEE;
    margin-top: 3.5rem;
    width: 95%;
    margin-left: 0.7rem;
    text-align: center;
  }

  .update {

    color: #9C9C9C;
    margin-top: 7px
  }

  .tjxhz {
    text-align: center;
    float: right;
    padding-left: 5%;
    padding-right: 15%

  }

  .syss {
    text-align: center;
    float: left;
    padding-left: 5%;
    padding-right: 10%
  }
</style>
